<template>
  <div style="padding: 10px">
    <div class="swipe">
      <van-swipe class="my-swipe" :autoplay="6000" indicator-color="#1989fa">
        <van-swipe-item v-for="(item, i) in swipeImgList" :key="i">
          <img :src="item.src" alt />
        </van-swipe-item>
      </van-swipe>
    </div>
    <div class="goodsinfo">
      <div class="goodInfo-title">{{goodsInfoList.title}}</div>
      <p>
        市场价：
        <span>￥{{goodsInfoList.market_price}}</span>
        销售价：
        <em>￥{{goodsInfoList.sell_price}}</em>
      </p>
      <div class="count">
        <span>购买数量</span>
        <van-stepper v-model="count" />
      </div>
      <div class="btns">
        <van-button type="info" size="small">立即购买</van-button>
        <van-button type="danger" size="small" @click="addShopCar()">加入购物车</van-button>
      </div>
    </div>
    <div class="goods-params">
      <div class="title">商品参数</div>
      <div class="body">
        <p>商品货号: {{goodsInfoList.goods_no}}</p>
        <p>库存情况: {{goodsInfoList.stock_quantity}}</p>
        <p>上架时间: {{goodsInfoList.add_time | dateFormat}}</p>
      </div>
      <div class="btns">
        <van-button plain type="info" size="large" @click="toGoodsDesc(goodsInfoList.id)">图文介绍</van-button>
        <van-button plain type="danger" size="large" @click="toGoodsComment(goodsInfoList.id)">商品评论</van-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      goodsId: '',
      swipeImgList: [],
      count: 1,
      goodsInfoList: {}
    }
  },
  created() {
    this.goodsId = this.$route.params.id
    console.log(this.goodsId)
    this.getSwipeImg()
    this.getGoodsInfo()
  },
  methods: {
    async getSwipeImg() {
      const { data: res } = await this.$http.get(
        `/api/getthumimages/${this.goodsId}`
      )
      this.swipeImgList = res.message
      console.log(this.swipeImgList)
    },
    async getGoodsInfo() {
      const { data: res } = await this.$http.get(
        `/api/goods/getinfo/${this.goodsId}`
      )
      this.goodsInfoList = res.message[0]
      console.log(this.goodsInfoList)
    },
    toGoodsDesc(id) {
      this.$router.push(`/goodsdesc/${id}`)
    },
    toGoodsComment(id) {
        this.$router.push(`/goodscomments/${id}`)
    },
    addShopCar() {
      const shopObj = {
        id: this.goodsInfoList.id,
        price: this.goodsInfoList.sell_price,
        count: this.count,
        title: this.goodsInfoList.title,
        imgUrl: this.swipeImgList[0].src
      }
      this.$store.commit('setGoods', shopObj)
      this.$toast.success('添加购物车成功！')
      console.log(this.$store.state.shopCarList)
    }
  }
}
</script>

<style lang="less" scoped>
.swipe {
  height: 230px;
  border: 1px solid #ccc;
  border-radius: 3px;
  img {
    height: 200px;
  }
}
.my-swipe .van-swipe-item {
  color: #fff;
  text-align: center;
}
.goodsinfo {
  margin-top: 10px;
  padding: 15px;
  border-radius: 3px;
  border: 1px solid #ccc;
  .goodInfo-title {
    border-bottom: 1px solid #ccc;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }
  p {
    font-size: 14px;
    margin-top: 15px;
    margin-bottom: 10px;
    margin-left: 10px;
    color: #8f8f94;
    span {
      text-decoration: line-through;
      margin: 0 10px;
    }
    em {
      font-weight: 700;
      font-size: 16px;
      color: red;
      font-style: normal;
    }
  }
  .count {
    padding: 10px;
    p {
      font-size: 14px;
      color: #8f8f94;
    }
    .van-stepper {
      display: inline-block;
      vertical-align: middle;
      margin-left: 10px;
    }
  }
  .van-button {
    margin-right: 10px;
  }
}
.goods-params {
  margin-top: 10px;
  padding: 15px;
  border-radius: 3px;
  border: 1px solid #ccc;
  .title {
    font-size: 17px;
    padding-bottom: 10px;
    border-bottom: 1px solid #ccc;
  }
  .body {
    border-bottom: 1px solid #ccc;
    padding: 15px;
    p {
      font-size: 14px;
      margin: 10px 0;
      color: #8f8f94;
    }
  }
  .btns {
    margin-top: 10px;
    .van-button {
      height: 39px;
      line-height: 39px;
      border-radius: 5px;
      margin: 5px 0;
      background-color: #fff;
    }
  }
}
</style>
